<template>
	<view class="forget">
		
		<view class="content">
			<!-- 主体 -->
			<view class="main">
			<!-- 	<view class="tips">若你忘记了密码，可在此重置新密码。</view> -->
				<wInput
					v-model="phoneData"
					type="text"
					maxlength="11"
					placeholder="请输入手机号码"
				></wInput>
				
				
				<wInput
					v-model="verCode"
					type="number"
					maxlength="6"
					placeholder="验证码"
					
					isShowCode
					codeText="获取验证码"
					setTime="60"
					ref="runCode"
					@setCode="getVerCode()"
				></wInput>
			</view>
			
			<wButton 
				class="wbutton"
				text="绑定"
				:rotate="isRotate" 
				@click.native="startRePass()"
			></wButton>

		</view>
	</view>
</template>

<script>
	import { mapGetters, mapMutations, mapState, mapActions} from 'vuex'
	import { SMS,BindPhone} from '@/common/api.js'
	let _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	export default {
		data() {
			return {
				url:'',
				phoneData: "", //电话
				passData: "", //密码
				verCode:"", //验证码
				isRotate: false, //是否加载旋转
			}
		},
		components:{
			wInput,
			wButton
		},
		mounted() {
			_this= this;
		},
		onLoad(options) {
			this.url = options.url
		},
		methods: {
			...mapActions(['updateUserinfo']),
			getVerCode(){
				//获取验证码
				if (_this.phoneData.length != 11) {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '手机号不正确'
				    });
				    return false;
				}
				
				SMS({
					phone:_this.phoneData,
					no_captcha:0
				}).then(({ code, msg }) => {
					uni.showToast({
						title: '验证码发送成功',
						icon: 'none'
					})
				this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
				
				})
				
			},
			startRePass() {
				//重置密码
				if(this.isRotate){
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.phoneData.length != 11) {
				    uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '手机号不正确'
				    });
				    return false;
				}
			   
				if (this.verCode.length != 6) {
				    uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '验证码不正确'
				    });
				    return false;
				}
				_this.isRotate=true
				BindPhone({
					phone:_this.phoneData,
					code:_this.verCode
				}).then(({ code, msg }) => {
					if(code==200){
					uni.showToast({
						title: '绑定成功',
						icon: 'none'
					})
				   this.updateUserinfo()
				    uni.navigateTo({
				    	url:_this.url
				    })
					}
					 _this.isRotate=false
				})
				
				
				
			}
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");
</style>

